<template>
	<view class="main">
		<tou_hand1 handtitle='项目管理'></tou_hand1>
		<view class="show">

			<van-tabs :active="active" @click="gbtn">
				<van-tab title="已审核" name="a" >
					<view class="sone">
						<input v-model="name" placeholder='输入小区名搜索' />
						<view class="sonefoot" @click="sbtn">
							<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//search.png"></image>
						</view>
					</view>
					<view class="stwo">

						<van-cell v-for="(item, index) in showlist" :key="index">
							<view class="stwofirst" @click="detailbtn(item.projectId)">
								<view class="sfleft">
									<view class="sfshang">
										<view class='sfson1'>{{item.projectName}}</view>
										<view class='sfson'>总数(台):{{item.equi.totalEqu}}</view>
									</view>
									<view class="sfxia">
										地址：{{item.address}}
									</view>
									<view class="sfxia">
										近7日使用率：{{item.equi.usages}}
									</view>
									<view class="stwoleftx">
										<span :class="item.equi.free>0?'kfour':''">空闲(个):{{item.equi.free}}</span><span
											:class="item.equi.busy>0?'ktwo':'kthree'">
											占用(个):{{item.equi.busy}}</span> <span
											:class="item.equi.faults>0?'kone':'kthree'">故障(个):{{item.equi.faults}}</span>
										<span
											:class="item.equi.disconnects>0?'kone':'kthree'">离线(台):{{item.equi.disconnects}}</span>
									</view>
								</view>
								<view class="sfright">
									<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//yright.png"></image>
								</view>
							</view>
						</van-cell>

					</view>
				</van-tab>
				<van-tab title="未审核" name="b">
					<view class="stwo">

						<van-cell v-for="(item, index) in showlist" :key="index">
							<view class="stwofirst">
								<view class="sfleft">
									<view class="sfshang">
										<view class='sfson1'>{{item.projectName}}</view>
										<!-- <view class='sfson'>总数(台):{{item.equi.totalEqu}}</view> -->
									</view>
									<view class="sfxia">
										地址：{{item.address}}
									</view>
									<!-- <view class="stwoleftx">
									<span :class="item.equi.free>0?'kfour':''">空闲(个):{{item.equi.free}}</span><span :class="item.equi.busy>0?'ktwo':'kthree'" >
									占用(个):{{item.equi.busy}}</span> <span :class="item.equi.faults>0?'kone':'kthree'" >故障(个):{{item.equi.faults}}</span>  <span :class="item.equi.disconnects>0?'kone':'kthree'">离线(台):{{item.equi.disconnects}}</span>
								</view> -->
								</view>
								<!-- <view class="sfright">待审核</view> -->
							</view>
						</van-cell>

					</view>
				</van-tab>
			</van-tabs>
			<view style="position: fixed;bottom: 40upx;width: 100%;" v-show="stype==2">
				<view class="sthree" @click="addbtn">
					添加小区
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'

	export default {
		components: {
			tou_hand1
		},
		mounted() {

		},

		data() {
			return {
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
				showlist: [], //列表数据
				name: "", //小区名
				active: 'a',
				status: '1', //审核状态；0：未审核 1：已审核
				stype: '', //运营商权限
				typeone: '', //0不刷新，1刷新
			}
		},
		onLoad(option) {

		},

		onShow() {

			this.stype = uni.getStorageSync('user').type
			this.typeone = uni.getStorageSync('typeone')

			if (this.typeone == 1) {
				this.active = 'b'
				this.status = '0'
				// this.showlist = [];
				// this.onRefresh();
			} else if (this.typeone == 0) {
				this.active = 'a'
				this.status = '1'
			} else if (this.typeone == 2) {
				this.active = 'b'
				this.status = '0'
				this.showlist = [];
				this.onRefresh();
			}
			console.log(this.typeone);
			this.loadMore();
		},
		methods: {
			// 获取用户管理的小区列表
			loadMore() {
				if (this.refreshing) {
					this.showlist = [];
					this.refreshing = false;
				}
				const that = this;
				let data = {
					projectName: this.name,
					pageNum: that.pageNum,
					pageSize: that.pageSize,
					status: this.status
				}
				that.loading = true;
				that.$base.request1('manager/project/list', 'GET', data)
					.then(res => {
						that.loading = false;
						if (res.data.rows && res.data.rows.length > 0) {
							that.showlist = that.showlist.concat(res.data.rows);
							that.pageNum += 1;

						} else {
							that.finished = true;
						}
					})
					.catch(err => {

					})
			},
			
			//跳转添加小区页面
			addbtn() {
				uni.navigateTo({
					url: '/manager_pages/add_cell/add_cell',
				});

			},
			// //跳转小区详情
			// detailbtn(){
			// 	 uni.navigateTo({
			// 	        url: '/pages/community_details/community_details',
			// 	 });

			// }
			//跳转小区详情
			detailbtn(projectId) {
				uni.navigateTo({
					url: '/manager_pages/charging_area/charging_area?projectId=' + projectId,
				});

			},
			//查询
			sbtn() {
				this.pageNum = 1;
				this.showlist = [];
				this.onRefresh();
			},

			gbtn(vul) {
				console.log(vul.detail.name)
				vul = vul.detail.name
				if (vul == 'a') {
					uni.setStorageSync('typeone', 0)
					this.status = '1'
					this.showlist = [];
					this.onRefresh()
				} else if (vul == 'b') {
					uni.setStorageSync('typeone', 1)
					this.status = '0'
					if (this.stype == 2) {
						this.showlist = [];
						this.onRefresh()
					} else {
						this.showlist = [];
					}

				}

			},
			
			onRefresh() {
				// 清空列表数据
				this.finished = false;
				//this.pageNum = 1
				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.loadMore();
			},

			onReachBottom() {
				if (!this.loading) {
					this.isLoadingMore = true; // 开始加载状态

					setTimeout(() => {
						this.onRefresh(); // 再次请求数据
					}, 500); // 模拟异步操作需要等待一段时间才能返回数据
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;

		// overflow-x: hidden;
		/deep/.van-list__finished-text {
			margin-top: 50upx;
			padding-bottom: 100upx;
		}

		/deep/.van-hairline--top-bottom::after {
			border-width: 0;
		}

		.show {
			width: 100%;
			padding-bottom: 80upx;
			// box-sizing: border-box;

			.sone {
				width: 650upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				margin: 32upx auto;

				input {
					width: 562upx;
					height: 64upx;
					border: 1upx solid #b0b0b0;
					padding-left: 20upx;
				}

				.sonefoot {
					width: 101upx;
					height: 68.5upx;
					background-color: #4B98ED;
					text-align: center;
					box-sizing: border-box;
					padding-top: 13upx;

					image {
						width: 39upx;
						height: 40upx;
					}
				}
			}

			/deep/.van-tab {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #999999;
			}

			/deep/.van-tab--active {
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				color: #4b98ed;
			}

			/deep/.van-tabs__line {
				width: 91upx !important;
				height: 4upx;
				border-radius: 2px;
				background-color: #4B98ED;
			}

			.stwo {
				width: 100%;
				box-sizing: border-box;

				.stwofirst {
					width: 686upx;
					height: 230upx;
					border-radius: 16upx;
					box-shadow: 0upx 4upx 9upx 0upx rgba(44, 44, 44, 0.21);
					margin: 15upx auto;
					// margin-bottom: 15upx;
					display: flex;
					justify-content: space-between;
					padding: 29upx 24upx;
					box-sizing: border-box;
					align-items: center;

					.sfleft {
						width: 700upx;

						.sfshang {
							font-size: 28upx;
							font-family: PingFang SC Bold, PingFang SC Bold-Bold;
							font-weight: 700;
							color: #0b0b0b;
							margin-bottom: 10upx;
							display: flex;

							.sfson1 {
								width: 400upx;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
							}

							.sfson {
								font-size: 24upx;
								font-family: PingFang SC Medium, PingFang SC Medium-Medium;
								font-weight: 500;
								color: #666666;
								width: 220upx;
								text-align: right;
							}
						}

						.sfxia {
							font-size: 24upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #666666;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.stwoleftx {
							font-size: 24upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #666666;

							.kone {
								margin-left: 20upx;
								color: red;
							}

							.ktwo {
								margin-left: 20upx;
								color: #BC12ED;
							}

							.kthree {
								margin-left: 20upx;
								color: #666666;
							}

							.kfour {
								color: #39b55a;
							}
						}
					}

					.sfright {

						// font-size: 28upx;
						// font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						// font-weight: 700;
						// color: #4b98ed;
						image {
							width: 13upx;
							height: 22upx;
						}
					}
				}

				.van-cell:not(:last-child)::after {
					border-bottom: 0px;
				}

				.van-cell {
					padding: 10upx 0;
				}

				.van-list {
					margin: 8upx auto;
				}
			}

			.sthree {
				width: 686upx;
				height: 88upx;
				border-radius: 16upx;
				box-shadow: 0upx 4upx 9upx 0upx rgba(19, 103, 197, 0.6);
				margin: 0 auto;
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: center;
				line-height: 88upx;
				background-color: #4b98ed;
				color: #ffffff;

				// margin-bottom: 150upx;
			}
		}

	}
</style>